<template>
	<!-- <div class="w-screen flex justify-center">
		<view class="box">
			<view class="head">
				<view class="cu-avatar img round margin-left" :style="{ 'background-image': 'url(' + avator + ')' }">
				</view>
			</view>
			<celllist></celllist>
		</view>
	</div> -->
	<div class="main" style="padding-top: 7vh;">
		<div style="height: 20vh;width: 100%;display: flex;align-content: end;align-items: end;position: relative;"
			class="top  ">
			<div style="width: 100%;height: 100%;background-color: #000;opacity: 0.1;position: absolute;z-index: 5;"
				class="">
			</div>

			<div style="display: flex;align-content: end;align-items: center;margin-bottom: 15px;" class="content info">
				<view style="width: 60px;height: 60px;margin-left: 20px; border-radius:50%;background-size: cover;"
					class=" " :style="{ 'background-image': 'url(' + avator + ')' }">
				</view>
				<div class="info-text">
					<view style="color: #fff;margin-left: 20px;font-weight: 600;" class="">{{ userName }}</view>
					<view style="color: #fff;margin-left: 20px;font-weight: 600;" class="">{{ email }}</view>

				</div>

			</div>

			<div class="blur-background">
				<!-- 背景图片 -->

			</div>


		</div>
		<div style="height: 80vh;width: 100%;background: #fff;margin-top:-10px;z-index: 10;" class="body">
			<celllist></celllist>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import headimg from '@/modul/Aboutme/headimg.vue'
import celllist from '@/modul/Aboutme/celllist.vue'
import Dialog from '@/modul/common/Dialog.vue'
import { getuserInfo } from '@/store/api.js'
export default {
	computed: {
		// 使用对象展开运算符将 mapState 的结果混入计算属性
		...mapState({
			// 映射 this.token 到 this.$store.state.token
			token: 'token',
		})
	},
	onShow() {
		getuserInfo().then(data => {
			console.log(data)
			this.avator = data.data.avatar ? data.data.avatar : 'http://8.146.208.139:3000/avator/orignavator.png'
			this.userName = data.data.userName ? data.data.userName : '用户'
			this.email = data.data.email ? data.data.email : ''
		})
	},
	components: {
		headimg,
		celllist,
		Dialog
	},
	data() {
		return {
			avator: '',
			userName:'',
			email:'',
			mes: {}
		};
	}
}
</script>

<style lang="scss" scoped>
.main {
	width: 100vw;

	background-color: rgba(243, 243, 243, 0.934);
	min-height: 90vh;
	padding-bottom: 50px;

}

@media screen and (min-width: 600px) {
	.main {
		width: 35vw;

		background-color: rgba(243, 243, 243, 0.934);
		min-height: 90vh;
		padding-bottom: 50px;

	}
}

.blur-background {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	transform: translateX(-50%);
	height: 19vh;
	background-image: url('https://pic2.zhimg.com/v2-097040505bf982575d8c5833d262c3d9_r.jpg');
	background-size: cover;
	background-position: center;
	filter: blur(2px);
	z-index: 2;
	/* 确保背景元素在前景内容之下 */
}

.content {
	position: relative;
	/* 确保前景内容相对于父容器定位 */
	z-index: 4;
	/* 确保前景内容在背景元素之上 */
	/* 其他样式 */
}

.head {

	margin-top: 100px;
	text-align: center;
}

.body {}

.img {
	margin: 0 auto;
	width: 40vw;
	height: 40vw;
}

.box {
	width: 100vw;
}

@media screen and (min-width: 600px) {
	.box {
		width: 35vw;
		padding-top: 50px;

		background-color: rgba(243, 243, 243, 0.934);
		padding-bottom: 50px;
		min-height: 100vh;
	}

	.img {
		margin: 0 auto;
		width: 10vw;
		height: 10vw;
	}
}
</style>